<template>
  <view class="container">
    <view style="background-color: #fff;padding:20rpx">
      <u-steps :current=flow>
        <u-steps-item :title="title">
        </u-steps-item>
        <u-steps-item title="考试"></u-steps-item>
        <u-steps-item title="培训结束"></u-steps-item>
      </u-steps>
    </view>
    <!-- 视频播放容器 -->
    <view class="video-container" v-if="!review">
      <video id="myVideo" :src="defaultVideoUrl" autoplay controls class="video-player" @play="onVideoPlay(course)">
      </video>
    </view>
    <view class="section-title">
      <p>章节目录</p>
    </view>
    <u-divider></u-divider>
    <!-- 课程章节列表 -->
    <view class="chapter-list">
      <view>
        <view class="video-item">
          <view class="video-info" v-for="item, index in chapters" :key="index">
            <view class="title">{{ item.sectionName }}</view>
            <view v-if="item.courseList && item.courseList.length > 0">
              <view class="course-info" :class="{ active: currentCourseId === course.courseId }"
                v-for="course, courseIndex in item.courseList" :key="courseIndex">
                <view>{{ course.courseName }}</view>
                <view class="duration">{{ course.courseSecond }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <u-button type="primary" shape="circle" @click="gotoAnswer">答题</u-button>
    </view>
  </view>
</template>

<script>
import { getStudyCourse } from '@/api/train/index.js'
import { getConfig } from "@/api/system/config.js";
export default {
  data() {
    return {
      flow: 0,
      planExaminationId: 0,
      chapters: [],
      defaultVideoUrl: '', // 新增默认视频地址
      // 新增当前播放课程标识
      currentCourseId: null,
      //小程序审核状态
      review: true,
      title: '看视频'
    }
  },
  onLoad(options) {
    //获取小程序审核状态
    getConfig(101).then(response => {
      console.log(response.data)
      this.title = '学习内容'
      //修改标题栏
      uni.setNavigationBarTitle({
        title: response.data.configValue === 'true' ? '学习内容' : '看视频'
      })
      this.review = response.data.configValue === 'true';
      console.log(this.review)
    });
    if (options.id) {
      console.log('接收到的培训计划ID:', options.id)
      this.planExaminationId = options.id;
      this.getInfo();
    }
  },
  methods: {
    async getInfo() {
      const { data, code, msg } = await getStudyCourse({ planExaminationId: this.planExaminationId });
      console.log(data)
      if (code == 200) {
        this.chapters = data;
        console.log(data[0])
        // 设置默认播放视频
        if (data.length && data[0].courseList?.length) {
          const firstCourse = data[0].courseList[0];
          // this.defaultVideoUrl = data[0].courseList[0].courseUrl || 'https://example.com/default.mp4';
          // 设置默认高亮课程ID
          this.currentCourseId = firstCourse.courseId;
        }
      }
    },
    //答题
    gotoAnswer() {
      uni.navigateTo({
        url: `/pagesA/train/answerQuesiton/index?id=${this.planExaminationId}`
      });
    },
    // 新增播放器事件处理
    onVideoPlay(course) {
      this.currentCourseId = course.courseId;
    }
  }
}
</script>

<style lang="scss" scoped>
.video-container {
  width: 100%;
  height: 400rpx;
  margin-top: 20rpx;
  background: #000;
  overflow: hidden;

  .video-player {
    width: 100%;
    height: 100%;
  }
}

.chapter-list {
  margin-top: 30rpx;

  .video-item {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;

    .video-info {
      display: flex;
      flex-direction: column;
      margin-bottom: 15rpx;

      .index {
        color: #999;
        margin-right: 15rpx;
      }

      .title {
        flex: 1;
        font-size: 34rpx;
        font-weight: bold;
      }

      .duration {
        color: #666;
        font-size: 24rpx;
      }
    }

    .progress-box {
      .progress-text {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 10rpx;
        display: block;
      }
    }
  }
}

.course-info {
  display: flex;
  justify-content: space-between;
  margin: 10px;
}

.action-buttons {
  position: fixed;
  bottom: 40rpx;
  left: 30rpx;
  right: 30rpx;

  /deep/ .u-button {
    background: linear-gradient(45deg, #2979ff, #00bcd4);
  }
}

.section-title {
  margin-top: 20rpx;
  margin-left: 20rpx;
  font-size: 36rpx;
  font-weight: bold
}

// 新增高亮样式
.course-info.active .course-name {
  color: #2979ff;
  font-weight: bold;
  position: relative;
  padding-left: 20rpx;

  &::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: #ff0000;
    font-size: 24rpx;
  }
}
</style>